Chizaram Chibueze
·Follow
4 min read·Jul 9, 2023--
In the ever-evolving world of web development, Next.js has emerged as a popular framework for building modern and scalable web applications. With its efficient server-side rendering capabilities, intuitive API routes, and seamless client-side transitions, Next.js has gained a significant following among developers. However, deploying a Next.js app to a reliable hosting platform can be crucial step towards making your creation accessible to the world. That is where Firebase Hosting comes into play.
In this tutorial, I will walk you through the process of deploying a Next.js app to Firebase Hosting.
Firebase, a comprehensive suite of cloud-based tools provided by Google, offers a simple yet powerful solution for hosting static and dynamic websites, along with various other features such as database management, authentication, and real-time data synchronization.
Let’s dive into the process of deploying your Next.js app to Firebase Hosting, step by step.
Create a Firebase Account:Visit the Firebase website (https://firebase.google.com/) and click on “Get Started.”Sign in with your Google account or create a new one.Once logged in, click on “Go to Console” to access the Firebase Console.2. Set up a New Firebase Project:
In the Firebase Console, click on “Add project” or the “Create a project” button.Provide a unique project name and select your country/region.Enable Google Analytics if desired, and click on “Create project.”3. Install Firebase CLI (Command Line Interface):
Open a terminal or command prompt on your local machine.Run the following command to install the Firebase CLI globally:npm install -g firebase-tools4. Login to Your Account:
firebase login5. Initialize Firebase in Your Next.js Project:
Navigate to your Next.js project’s root directory in the terminal.Run the following command to initialize Firebase:firebase initSelect “Hosting” using the arrow keys and press Enter.Choose your Firebase project from the list or create a new one.Set the public directory to “out” (assuming you are using Next.js default build library).Configure whether you want to enable single-page app (SPA) routing (usually “No” for Next.js).Confirm the initialization by selecting “No” to overwrite any existing files.Since this is a Next app, I have added another script called “export” in my package.json . When building a project that will be used in production, you need to build it and export it to be production ready."export": "next export" after adding this to your scripts, your package.json should look similar to this sample below:
{ "name": "example-app", "version": "0.1.0", "private": true, "scripts": {"dev": "next dev","build": "next build","start": "next start","lint": "next lint","export": "next export" }, "dependencies": {"@types/node": "20.4.1","@types/react": "18.2.14","@types/react-dom": "18.2.6","autoprefixer": "10.4.14","eslint": "8.44.0","eslint-config-next": "13.4.9","next": "13.4.9","postcss": "8.4.25","react": "18.2.0","react-dom": "18.2.0","tailwindcss": "3.3.2","typescript": "5.1.6" }}6. Build Your Next.js App:
In the terminal, run the command to build your Next.js app:npm run build && npm run exportIf you encounter this error: — error “next export” does not work with App Router. Please use “output: export” in next.config.js https://nextjs.org/docs/advanced-features/static-html-export,
Try updating your next.config.js by adding the ‘output: export’ line
/** @type {import('next').NextConfig} */const nextConfig = {output: 'export'}module.exports = nextConfig